@import (reference) "../../normal.less";

.gift-anim {
  @f11();
  position: fixed;
  z-index: 7;
  .mask();
  .panel {
    width: 630rpx;
    height: 1225rpx;
    position: absolute;
    z-index: 1;
    .center(630rpx,1225rpx);
    .bg {
      @fill();
    }
    .btn-close {
      width: 65rpx;
      height: 65rpx;
      position: absolute;
      top: 150rpx;
      right: 28rpx;
      z-index: 2;
      .bg {
        @fill();
      }
    }
    .gift {
      width: 518rpx;
      height: 380rpx;
      position: absolute;
      z-index: 1;
      .row-center(518rpx,233rpx);
    }
    .count {
      width: 280rpx;
      height: 50rpx;
      .row-center(280rpx, 650rpx);
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 41rpx;
      font-family: FZCuYuan-M03S;
      font-weight: bold;
      color: rgba(255, 253, 236, 1);
      .y {
        color: #ffc629;
      }
    }
    .tips {
      width: 430rpx;
      height: 235rpx;
      position: absolute;
      .row-center(430rpx,720rpx);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column nowrap;
      .p {
        width: 96%;
        margin-left: 2%;
        text-align: left;
        font-size: 22rpx;
        font-family: FZCuYuan-M03S;
        font-weight: 400;
        color: rgba(255, 221, 128, 1);
        min-height: 34rpx;
      }
    }
    .btn {
      //
      width: 305rpx;
      height: 105rpx;
      .row-center(305rpx,970rpx);
      .bg {
        @fill();
      }
      .cd {
        filter: grayscale(100%);
      }
      .info {
        position: absolute;
        width: 100%;
        height: 100%;
        top: -8rpx;
        left: 0;
        z-index: 1;
        font-size: 49rpx;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(119, 59, 9);
      }
      .info-cd {
        color: #fff;
      }
    }
    .xy-line {
      width: 425rpx;
      height: 72rpx;
      position: absolute;
      .row-center(425rpx,1078rpx);
      display: flex;
      justify-content: center;
      align-items: center;
      justify-content: space-between;
      .lab {
        width: 160rpx;
        height: 72rpx;
      }
      .process {
        width: 252rpx;
        height: 42rpx;
        position: relative;
        .process-border {
          @fill();
        }
        .process-mask {
          width: 234rpx;
          height: 16rpx;
          position: absolute;
          z-index: 1;
          .row-center(234rpx, 6rpx);
        }
        .process-line {
          width: 161rpx;
          height: 33rpx;
          position: absolute;
          top: calc((100% - 33rpx) * 0.5);
          left: 3rpx;
          transform-origin: center left;
          @keyframes process {
            0% {
              width: 0;
            }
            100% {
              width: 161rpx;
            }
          }
          animation: process 1.5s linear forwards;
        }
      }
    }
  }
}
.btn();
